<template>
  <el-row class="tac">
    <el-col :span="12">
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
      >

        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <location/>
            </el-icon>
            <span>个人中心</span>
          </template>
          <el-menu-item-group>
            <router-link to="/userCenter/orderhistory">
              <el-menu-item index="1-1">历史下单记录</el-menu-item>
            </router-link>
            <router-link to="/userCenter/userinfo">
              <el-menu-item index="1-2">用户信息</el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import {ref} from "vue";
import {
  Location,
} from '@element-plus/icons-vue'
export default {
  name: "UserAside",
  components: {
    Location
  },
  data() {
    return {
      isCollapse: ref(true),
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: calc(100vh - 50px);
}
</style>
